<template>
  <div id="content" class="mybox">
    <header :style="{ backgroundImage: `url(${imageUrl.head})` }"></header>
    <h2>
      <span class="square">权益选购</span>
      <span>
        <van-swipe
          class="my-swipe"
          vertical
          :show-indicators="false"
          :autoplay="2000"
        >
          <van-swipe-item v-for="(item, index) in mockDateList" :key="index">
            <span
              class="img"
              :style="{ backgroundImage: `url(${item.url})` }"
            ></span>
            <span class="context"
              >{{ item.nickName }}│ {{ item.second }}前定购了{{
                item.cardName
              }}一张</span
            >
          </van-swipe-item>
        </van-swipe>
      </span>
    </h2>
    <main>
      <div
        class="left"
        :style="{ backgroundImage: `url(${imageUrl.left})` }"
        @click="choose_left()"
      ></div>
      <div
        class="right"
        :style="{ backgroundImage: `url(${imageUrl.right})` }"
        @click="choose_right()"
      ></div>
    </main>
    <footer :style="{ backgroundImage: `url(${imageUrl.foot})` }"></footer>
    <article>
      <span>提示告知：本次活动数量有限，&nbsp;最终解释权归喷喷涂涂所有</span>
    </article>
  </div>
</template>
<script>
import {
  adList,
  getOrderSign,
  setTenCardOnline,
  queryBorad,
  authInfo,
} from '@/api/api';
import { Dialog, Swipe, SwipeItem, Toast } from 'vant';
export default {
  name: 'mybox',
  props: [],
  data() {
    return {
      //图片素材地址
      imageUrl: {
        head: '',
        left: '',
        right: '',
        foot: '',
        infor: '',
      },
      orderSn: undefined,
      mockDateList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.init();
    authInfo().then((res) => {
      this.infor = res.data.data;
      console.log(res.data.data, 4);
    });
  },
  mounted() {},
  methods: {
    async init() {
      // 获取背景素材
      await adList({
        position: -34,
      })
        .then((res) => {
          let list = res.data.data.list;
          //console.log(list);
          for (let i = 0; i < list.length; i++) {
            if (list[i].id == 1233) {
              this.imageUrl.head = list[i].url;
            } else if (list[i].id == 1234) {
              this.imageUrl.foot = list[i].url;
            } else if (list[i].id == 1235) {
              this.imageUrl.left = list[i].url;
            } else if (list[i].id == 1236) {
              this.imageUrl.right = list[i].url;
            }
          }
        })
        .catch((err) => {});
      //获取充值轮播消息数据
      this.getMockDateList();
    },
    submitForm() {},
    resetForm() {},
    getList() {},
    setIndex(index) {},
    handleFilter() {},
    handleCreate() {},
    choose_left() {
      Dialog.confirm({
        title: '系统提示',
        message:
          '享受四大版块-工程发包、施工找活、\n二手市场、工具租赁的涂装行业信息-月卡，\n立即定购！',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          if (this.infor.mobile == undefined) {
            Dialog.confirm({
              title: '系统提示',
              message: '请先登录',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            })
              .then(() => {
                this.$router.push({ path: '/check' });
              })
              .catch(() => {});
            return;
          }
          this.pay(1);
        })
        .catch(() => {
          // on cancel
        });
    },
    choose_right() {
      Dialog.confirm({
        title: '系统提示',
        message:
          '享受“金牌会员”专属权益\n四大版块涂装行业信息—年卡，\n立即定购！',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          if (this.infor.mobile == undefined || this.infor.mobile == '') {
            Dialog.confirm({
              title: '系统提示',
              message: '请先登录',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            })
              .then(() => {
                this.$router.push({ path: '/check' });
              })
              .catch(() => {});
            return;
          }
          // this.$router.push({
          //   path: '/items/members-zone'
          // });
          this.pay(2);
        })
        .catch(() => {
          // on cancel
        });
    },
    pay(type) {
      if (type == 1) {
        if (typeof WeixinJSBridge == 'undefined') {
          if (document.addEventListener) {
            document.addEventListener(
              'WeixinJSBridgeReady',
              onBridgeReady,
              false
            );
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
          }
        } else {
          this.onBridgeReady();
        }
      } else {
        if (typeof WeixinJSBridge == 'undefined') {
          if (document.addEventListener) {
            document.addEventListener(
              'WeixinJSBridgeReady',
              onBridgeReady1,
              false
            );
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady1);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady1);
          }
        } else {
          this.onBridgeReady1();
        }
      }
    },

    onBridgeReady() {
      getOrderSign({
        orderId: 1181174,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              // setTenCardOnline({
              //   'orderSn': that.orderSn,
              //   'goodId': 1181174
              // }).then((res) => {
              //   let status = 0;
              //   if (res.data.errmsg == '成功') {
              //     status = 1
              //   }
              //   that.$router.push({
              //     name: 'paymentTenStatus',
              //     query: {
              //       status: status,
              //     },
              //   });
              // });
              that.$router.push({
                name: 'paymentTenStatus',
                query: {
                  status: 1,
                },
              });
            }
          }
        );
      });
    },

    onBridgeReady1() {
      getOrderSign({
        orderId: 1181170,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              // setTenCardOnline({
              //   'orderSn': that.orderSn,
              //   'goodId': 1181170
              // }).then((res) => {
              //   let status = 0;
              //   if (res.data.errmsg == '成功') {
              //     status = 1
              //   }
              //   that.$router.push({
              //     name: 'paymentVipStatus',
              //     query: {
              //       status: status,
              //     },
              //   });
              // });
              that.$router.push({
                name: 'paymentVipStatus',
                query: {
                  status: 1,
                },
              });
            }
          }
        );
      });
    },
    async getMockDateList() {
      // queryBorad({
      //   page: 1,
      //   limit: 100
      // }).then(res => {
      //   this.mockDateList.length = 0
      //   //用虚拟数据填充
      //   let _obj = JSON.stringify(res.data.data)
      //   let list = JSON.parse(_obj);
      //   let starList = ['', '*', '**', '***', '****', '*****']
      //   let indexList = ['月卡', '年卡']
      //   let obj
      //   for (let i = 0; i < 100; i++) {
      //     if (!list[i]) {
      //       list[i] = '*****'
      //     } else {
      //       if (list[i].length < 5) {
      //         list[i] = list[i] + starList[5 - list[i].length]
      //       }
      //     }
      //     obj = {}
      //     obj.nickName = list[i]
      //     obj.cardName = indexList[Math.round(Math.random())]
      //     obj.second = Math.round(Math.random() * 100) || 1
      //     this.mockDateList.push(obj)
      //   }
      // })
      await adList({
        position: 36,
        limit: this.limit,
      }).then((respone) => {
        this.mockDateList.length = 0;
        //this.sculptureList = respone.data.data.list
        let _obj = JSON.stringify(respone.data.data.list);
        let list = JSON.parse(_obj);
        const len = list.length;
        let obj, le, content, nickName, cardName, second, url;
        let star = '*';
        for (let i = 0; i < len; i++) {
          content = list[i]['content'] || '';
          nickName = content.split('-----')[0] || star.repeat(5);
          cardName = content.split('-----')[1] || '月卡';
          second = list[i]['name'] || '1s';
          url = list[i]['url'] || '';
          if (nickName != star.repeat(5)) {
            le = nickName.length || 0;
            if (le > 5) {
              nickName = nickName.substring(0, 3) + '**';
            } else {
              nickName = nickName + star.repeat(5 - le);
            }
          }
          obj = {};
          obj['nickName'] = nickName;
          obj['cardName'] = cardName;
          obj['second'] = second;
          obj['url'] = url;
          this.mockDateList.push(obj);
        }
      });
    },
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
};
</script>
<style lang="scss" scoped>
.mybox {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: white;
}

header {
  height: 14.6%;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

h2 {
  padding: 0% 6%;
  margin: 5px 0;
  display: flex;
  height: 30px;
  line-height: 30px;
  font-size: 16px;

  span:nth-of-type(1) {
    display: flex;
    padding: 1.5px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 1.5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  span:nth-of-type(2) {
    flex: 1;

    .my-swipe {
      height: 100%;

      .van-swipe-item {
        display: inline-flex;
        padding: 2px 2px;
        align-items: center;

        .img {
          display: block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin: 0 10px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .context {
          color: rgba(0, 0, 0, 0.2);
          font-size: 12px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

footer {
  height: 18.9%;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  //background-origin: content-box;
  margin: 25px 6% 0 6%;
}

main {
  flex: 1;
  padding: 0 6%;
  display: flex;

  .left,
  .right {
    flex: 1;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .left {
    margin-right: 12px;
  }

  .right {
    margin-left: 12px;
  }
}

article {
  justify-content: center;
  display: flex;
  width: 100%;
  height: 50px;
  z-index: 1;
  position: absolute;
  bottom: 0;
  align-items: center;

  span {
    transform: scale(0.8);
    color: rgba(0, 0, 0, 0.6);
  }
}

/**方形图标 */
.square::before {
  color: rgba(251, 180, 26, 1);
  content: '▊ ';
}
</style>
